<template>
  <DetailStructure title="招贤纳士" first-sentence="“为公司寻将才，为人才找舞台”，"
                   second-sentence="图慧科技诚邀您的加入，多个岗位虚席以待：" :bg="employmentBg">
    <template #content>
      <!--      <div class="Talent-container">
              <div class="title">
                人才招聘
              </div>
              <div class="Talent-warp">
                <ul class="Talent-ul">
                  <li
                    v-for="(item,index) in talentdate"
                    :key="index"
                    class="Talent-li"
                  >
                    {{ item }}
                  </li>
                </ul>

                <div class="Talent-downdata">
                  <div class="recruitment recruitment-row">
                    <div
                      class="clearfix recruitInfo"
                      v-for="(item, index) in navLists" :key="index"
                    >
                      <div
                        class="bottom-boder"
                        :class="{'router-link-exact-active':item == index}"
                      >
                        <span @click="handleClick(index)"> {{ item.name }}</span>
                        <span @click="handleClick(index)"> {{ item.people }}人</span>
                        <span @click="handleClick(index)"> {{ item.address }}</span>
                      </div>

                      <div
                        v-for="(item2, key2) in item.child"
                        :key="key2"
                        class="recruitDesc clearfix"
                        v-show="data.show2 && data.currIndex == index"
                      >
                        <h3 style="white-space: normal;">{{ item2.name1 }}:</h3>
                        <div class="description" style="white-space: normal;">
                          <p>{{ item2.text }}</p>
                          <p>{{ item2.cont }}</p>
                          <p>{{ item2.content }}</p>
                          <p>{{ item2.contentd }}</p>
                          <p>{{ item2.contentr }}</p>
                          <p>{{ item2.contenttr }}</p>
                          <p>{{ item2.contenttrr }}</p>
                          <p>{{ item2.contenttrrr }}</p>
                          &nbsp;
                        </div>
                        <h3 style="white-space: normal;">{{ item2.Post }}</h3>
                        <div class="description">
                          <p>{{ item2.text1 }}</p>
                          <p>{{ item2.cont2 }}</p>
                          <p>{{ item2.content3 }}</p>
                          <p>{{ item2.content4 }}</p>
                          <p>{{ item2.content5 }}</p>
                          <p>{{ item2.content6 }}</p>
                          <p>{{ item2.content7 }}</p>
                          &nbsp;
                        </div>
                      </div>
                    </div>

                  </div>

                </div>


              </div>
            </div>-->
      <div class="employment-container">
        <div class="head-title">
          人才招聘
        </div>
        <ul class="employment-wrapper">
          <li class="employment" v-for="item in navLists" :key="item">
            <div class="borders">
              <div class="head">
                <span class="name">{{item.name}}</span>
                <span class="address">{{item.address}} - {{item.people}}人</span>
              </div>
              <div class="requirement" v-if="item.workContent">
                <div class="title">工作内容</div>
                <div class="content" v-html="item.workContent"></div>
              </div>
              <div class="requirement" v-if="item.requirement">
                <div class="title">任职要求</div>
                <div class="content" v-html="item.requirement"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </template>
  </DetailStructure>
</template>

<script setup>
  import {reactive} from 'vue';
  import DetailStructure from "@/components/common/DetailStructure.vue";
  import employmentBg from '@/assets/imgs/employment/employmentBg.jpg';
  import {recruitmentList} from "@/utils/data.js";

  const talentdate = ['招聘职位', '招聘人数', '工作地点']
  const navLists = recruitmentList;

  const content = `<p>1、精通HTML/Javascript/XML等技术；</p><p>2、精通JSP、Servlet、EJB等技术；</p><p>3、精通Struts、Spring、Hibernate等框架技术，熟悉Ajax、Web service技术；</p><p>4、熟悉关系数据库理论，熟练掌握SQL语言，精通Oracle数据库，熟悉SqlServer数据库。`
  const data = reactive({
    currIndex: "", //当前索引
    spanIndex: [], //索引数组
    arrIndex: "", //用于判断是否做索引数组找到当前索引。-1为找不到,0找到了。
    show2: false,
  })


  function handleClick(index) {
    // 初始化三级导航，默认不显示。
    // 当前索引=index
    data.currIndex = index;
    // console.log("当前索引index", index);
    // 判断当前索引是否在索引数组spanIndex中。arrIndex的值只有两种结果，-1未找到。0找到了。
    data.arrIndex = data.spanIndex.indexOf(index);
    // console.log("arrIndex", data.arrIndex);

    if (data.arrIndex == 0) {
      //arrIndex ==0，找到索引了，在索引数组spanIndex删除该索引,隐藏二级导航。
      data.spanIndex.splice(data.arrIndex, 1);
      data.show2 = false;
    } else {
      // arrIndex ==-1,没有找到，splice(-1,1)从spanIndex数组结尾处删除1个值，并将当前索引添加到索引数组spanIndex，show2为true，展示二级导航，
      data.spanIndex.splice(data.arrIndex, 1);
      data.spanIndex.push(index);
      data.show2 = true;
    }
    // console.log("索引数组", data.spanIndex);
  }


</script>

<style lang="scss" scoped>
  .Talent-container {
    padding-top: 40px;
    width: 100%;
    @include flex($direc: column, $col: center);


    .title {
      font-size: 35px;
      font-weight: bold;
      text-align: center;
    }

    .Talent-warp {
      width: $maxWidth + 300px;
      margin: 25px 0 110px;
      min-height: 300px;

      .Talent-ul {
        width: 100%;
        height: 56px;
        background-color: #4989d6;

        .Talent-li {
          font-size: 18px;
          line-height: 56px;
          color: #ffffff;
        }

      }

      .Talent-downdata {

        .recruitment {
          width: 100%;

          .recruitInfo {
            width: 100%;
            /*margin: 4px 0;*/
            cursor: pointer;
            transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;

            .bottom-boder {
              width: 100%;
              height: 60px;
              line-height: 60px;
              border-bottom: 1px solid #e5e5e5;
            }
          }

          .clearfix {
            zoom: 1;
          }

          .recruitDesc {
            padding: 14px;
            text-align: left;

            .titles {
              font-size: 22px;
              font-weight: bold;
            }

            .description {
              font-size: 14px;
            }
          }
        }

        .recruitment-row {
          zoom: 1;
        }

      }

    }
  }

  .clearfix .bottom-boder > span {
    font-size: 15px;
    /* color: #999; */
    float: left;
    line-height: 60px;
  }

  .Talent-li, .clearfix .bottom-boder > span:first-of-type {
    padding-left: 20px;
    width: 40%;
    text-align: left;
  }

  .Talent-li:nth-child(2) {
    text-align: center;
    width: 15%;
  }

  .clearfix .bottom-boder > span:nth-child(2) {
    text-align: left;
    padding-left: 8%;
    width: 16%;
  }

  .Talent-li:last-child {
    text-align: right;
    width: 38%;
  }

  .clearfix .bottom-boder > span:last-of-type {
    text-align: right;
    width: 31%;
  }

  .bottom-boder:hover {
    background: #f7f9fa;
  }

  .employment-container{
    width: 100%;
    height: 100%;
    background: #eeeeee;
    .head-title{
      font-size: 35px;
      font-weight: bold;
      text-align: center;
      //padding: 20px 0;
      padding-top: 50px;
    }
    .employment-wrapper{
      width: $maxWidth;
      margin: 0 auto;
      padding: 30px 0;
      column-count: 3;
      column-gap: 10px;
      //counter-reset: employment;
      .employment{
        background: #ffffff;
        margin-bottom: 10px;
        padding: 20px;
        break-inside: avoid-column;
        .borders{
          .head{
            padding-bottom: 5px;
            margin-bottom: 10px;
            border-bottom: 1px solid #eeeeee;
            @include flex($row:space-between);
            .name{
              font-weight: bold;
              color: $themeColor;
            }
            .address{
              font-size: 15px;
            }
          }
          .requirement{
            .title{
              color: #555;
              margin: 10px 0;
              font-size: 14px;
            }
            .content{
              font-size: 13px;
            }
          }
        }

      }
      .employment .borders:hover{
        box-shadow: $boxShadow;
        transform: scale(1.05);
        transition: 3s;
        cursor: pointer;
      }
    }
  }

</style>
